{% extends "base.html" %}

{% block content %}
<nav class="user-settings">
     <ul>
        <li>{% html.anchor "users/settings", "Settings", {"class": "cog"} %}</li>
        <li>{% html.anchor "users/settings/#password", "Password &amp; Email", {"class": "key"} %}</li>
        <li>{% html.anchor "users/settings/#security", "Security", {"class": "lock"} %}</li>
        <li class="current">{% html.anchor "users/accounts", "Accounts", {"class": "user"} %}</li>
    </ul>
    <h2 class="title">Accounts</h2>
</nav>

<section>
    <ul class="list">
        {% for i, account in accounts %}
        <li class="expandable" data-id="{{ account.id }}" id="row_{{ account.id }}">
            <div class="options">
                {% html.anchor "#", "edit" %} |
                {% html.anchor "#", "delete" %}
            </div>
            <div class="expand"></div>
            <h6>{{ account.username|e }}</h6>
            <small>{{ account.created|date("m/d/Y") }}</small>
            <div class="expandable-content">

            </div>
        </li>
        {% endfor %}
    </ul>
</section>
{% endblock %}

{% block jscript %}
<script>
    (function($) {
        $("li.expandable").each(function() {
            var row = $(this),
                id = parseInt(row.data('id')),
                container = row.find(".expandable-content"),
                state = container.is(":hidden");

            row
                .find("div.expand")
                .bind("click", function() {
                    $(this).toggleClass("on");
                    container.slideToggle();
                });
        });
    })(jQuery);
</script>
{% endblock %}